<script setup>
import ComAffix from "@/components/ComAffix.vue";
import {ref, computed} from 'vue';
import router from '@/router/index.js'
import {searchPost, searchPostByHot, searchPostByNew} from "@/api/search.js";

const route = computed(() => router.currentRoute.value);
const searchName = route.value.query.searchName
console.log("searchName: " + searchName)


const posts = ref([
])
const sortType = ref('综合');
const apiMap = {
  '综合': searchPost,
  '最新': searchPostByNew,
  '最热': searchPostByHot
}

const getPosts = async () => {
  const res = await apiMap[sortType.value](route.value.query.searchName)
  posts.value = res.data.data
}
getPosts()

const handleSortChange = () => {
  getPosts()
}


</script>

<template>
  <div class="main">
    <el-affix :offset="0">
      <ComAffix></ComAffix>
    </el-affix>
    <div class="w">
      <!-- 导航区域 -->
      <div class="search-nav">
        <div class="nav-left">
          <span class="active">文章</span>
          <span>
            <router-link :to="{ name: 'SearchTag', query: { tagName: searchName} }">标签</router-link>
          </span>
          <span>
            <router-link :to="{ name: 'SearchUser', query: { nickname: searchName} }">用户</router-link>
          </span>
        </div>
        <div class="nav-right">
          <el-select
            v-model="sortType"
            size="small"
            style="width: 120px"
            @change="handleSortChange"
          >
            <el-option label="综合" value="综合"/>
            <el-option label="最新" value="最新"/>
            <el-option label="最热" value="最热"/>
          </el-select>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="post-list">
        <div
          v-for="post in posts"
          :key="post.id"
          class="post-item"
        >
          <!-- 内容区域 -->
          <div class="content">
            <span class="title" v-html="post.title"></span>
            <p class="preview" v-html="post.content"></p>

            <!-- 标签 -->
            <div class="tags">
              <el-tag
                v-for="tag in post.tags"
                :key="tag"
                size="small"
                type="info"
              >{{ tag }}
              </el-tag>
            </div>

            <!-- 作者信息 -->
            <div class="author-info">
              <el-avatar
                :size="32"
                :src="post.author.avatar"
              />
              <div class="meta">
                <span class="name">{{ post.author.nickname }}</span>
                <span class="time">{{ post.createTime }}</span>
                <span class="info">热度({{post.heat}})</span>
                <span class="info">点赞({{post.likeCount}})</span>
                <span class="info">收藏({{post.collectCount}})</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.title em),
:deep(.preview em) {
  color: #fd5454;
  font-style: normal;
  font-weight: bold;
}

.main {
  min-height: 100vh;
  background-color: #f6f3f3;
}

.w {
  width: 1000px;
  margin: 0 auto;
}

.search-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 ;
  padding: 20px 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);

  .nav-left {
    span {
      margin-right: 30px;
      cursor: pointer;
      color: #666;
      padding: 8px 12px;
      border-radius: 4px;

      &:hover {
        background: #f5f7fa;
      }
    }

    .active {
      background: #f0f2f5;
      color: #409eff;
      font-weight: 500;
    }

    a {
      text-decoration: none;
      cursor: pointer;
      color: #636363;
    }
  }

  .nav-right {
    margin-right: 20px;
  }
}

.post-list {
  display: flex;
  align-items: normal;
  flex-wrap: wrap;
  gap: 37px;
}

.post-item {
  display: inline-block;
  background-color: white;
  height: 230px;
  width: 440px;
  padding: 20px;
  margin-bottom: 10px;

  .content {

    .title {
      margin: 0 0 12px;
      font-size: 18px;
      color: #333;
      font-weight: bold;
      max-width: 450px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }

    .preview {
      margin: 0 0 10px;
      color: #666;
      font-size: 15px;
      line-height: 1.5;
      height: 115px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'serif','微软雅黑';

    }

    .preview > * {
      display: inline;   /* 块级标签转为行内 */
      margin: 0;         /* 清除默认外边距 */
    }

    .tags {
      padding-bottom: 8px;
      margin-bottom: 3px;
      width: 440px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      border-bottom: 1px solid #cdcbcb;

      .el-tag {
        margin-right: 8px;
      }
    }

    .author-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .meta {
        display: flex;
        gap: 5px;
        .name {
          color: #333;
          font-size: 14px;
          width: 100px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: 'serif', '微软雅黑';
        }

        .time {
          color: #999;
          font-size: 14px;
        }

        .info{
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}

</style>
